<template>
  <div id="treeSearch" class="filter">
    <h4 class="title sle" v-if="title">{{ title }}</h4>
    <el-input v-model="filterText" placeholder="输入关键字进行过滤" clearable class="el-input" />
    <el-scrollbar :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
      <!--default-expand-all  是否默认展开所有节点
          :node-key="id" 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 
          :data="multiple ? treeData : treeAllData"  多选的话接受这个treeAllData数据
          :show-checkbox 多选框
          :check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
          :current-node-key	当前选中的节点
          :highlight-current 是否高亮当前选中节点，默认值是 false
          :expand-on-click-node 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
          :check-on-click-node  是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点
          :filter-node-method 对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏
          :default-checked-keys 默认勾选的节点的 key 的数组
          :node-click 当节点被点击的时候触发

          点击父级将 西北分部 传给表格
          点击 西北分部的子 获取父的值 将 西北分部和研发部都传过去
      -->
      <el-tree
        ref="treeRef"
        default-expand-all
        :node-key="id"
        :data="multiple ? treeData : treeAllData"
        :show-checkbox="multiple"
        :check-strictly="false"
        :current-node-key="!multiple ? selected : ''"
        :highlight-current="!multiple"
        :expand-on-click-node="false"
        :check-on-click-node="multiple"
        :props="defaultProps"
        :filter-node-method="filterNode"
        :default-checked-keys="multiple ? selected : []"
        @node-click="handleNodeClick"
        @check="handleCheckChange"
      />
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup name="treeSearch">
// treeSearch
//-----------------------------------------------------------------------------
import { reqSearchList } from '@/api/tableApi/tableApi'
import { ref, watch, onBeforeMount } from 'vue'
import { ElTree } from 'element-plus'
import useStore from '@/stores'
const { useTreeTable } = useStore()
//-----------------------------------------------------------------------------

// 接收父组件参数并设置默认值
interface TreeFilterProps {
  // requestApi?: (data?: any) => Promise<any> // 请求µ分类数据的 api ==> 非必传
  requestApi?: any // 请求分类数据的 api ==> 非必传
  data?: { [key: string]: any }[] // 分类数据，如果有分类数据，则不会执行 api 请求 ==> 非必传
  title?: string // treeFilter 标题 ==> 非必传
  id?: string // 选择的id ==> 非必传，默认为 “id”
  label?: string // 显示的label ==> 非必传，默认为 “label”
  multiple?: boolean // 是否为多选 ==> 非必传，默认为 false
  defaultValue?: any // 默认选中的值 ==> 非必传
}

//-----------------------------------------------------------------------------
// 默认传旨
const props = withDefaults(defineProps<TreeFilterProps>(), {
  id: 'id',
  label: 'label',
  multiple: false
})
//-----------------------------------------------------------------------------
// 树形组件别名
const defaultProps = {
  children: 'children',
  label: props.label
}

const filterText = ref<string>('')
const treeRef = ref<InstanceType<typeof ElTree>>()
// 单选
const treeData = ref<{ [key: string]: any }[]>([])
// 多选
const treeAllData = ref<{ [key: string]: any }[]>([])
// 选中的值
const selected = ref()

// 结构挂载前,多选
onBeforeMount(() => {
  // 重新接收一下默认值
  if (props.multiple) {
    selected.value = Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue]
  } else {
    selected.value = typeof props.defaultValue === 'string' ? props.defaultValue : ''
  }
  // 有数据就直接赋值，没有数据就执行请求函数
  if (props.data?.length) {
    treeData.value = props.data
    treeAllData.value = props.data
    return
  }

  treeData.value = props.requestApi.data
  treeAllData.value = props.requestApi.data
})

// 监听输入框
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

// 过滤(模糊过滤)
const filterNode = (value: string, data: { [key: string]: any }, node: any) => {
  if (!value) return true
  let parentNode = node.parent,
    labels = [node.label],
    level = 1
  while (level < node.level) {
    labels = [...labels, parentNode.label]
    parentNode = parentNode.parent
    level++
  }
  return labels.some((label) => label.indexOf(value) !== -1)
}

interface FilterEmits {
  (e: 'change', value: any): void
}
const emit = defineEmits<FilterEmits>()

// 单选
const page = ref<number>(1)
const pageSize = ref<number>(10)
const canshu = ref({
  area: '',
  department: ''
})
const handleNodeClick = async (data: { [key: string]: any }) => {
  if (props.multiple) return
  emit('change', data[props.id])
  canshu.value.area = data.pidname
  canshu.value.department = data.name

  const res = await reqSearchList(page.value, pageSize.value, canshu.value)
  useTreeTable.getTreeTable(res.data.list)
  console.log('🚚...  信息', res)
}

// 多选
const handleCheckChange = () => {
  emit('change', treeRef.value?.getCheckedKeys())
}

const getCurrentNode = (val: any) => {
  console.log('🚚...  信息', val)
}

// 暴露给父组件使用
defineExpose({ treeData, treeAllData })
</script>

<style lang="scss" scoped>
.filter {
  box-sizing: border-box;
  width: 220px;
  height: 100%;
  padding: 18px;
  margin-right: 10px;
  .title {
    margin: 0 0 15px;
    font-size: 18px;
    font-weight: bold;
    color: var(--el-color-info-dark-2);
    letter-spacing: 0.5px;
  }

  .el-input {
    margin: 0 0 15px;
    // background-color: $Hover !important;
  }
  .el-scrollbar {
    :deep(.el-tree) {
      //
      // background-color: $ShenSeBeiJing;
      padding: 10px;
      // border: 1px solid $Hover;
      border-radius: 5px;

      height: 80%;
      overflow: auto;
      .el-tree-node__content {
        height: 33px;
        &:hover {
          // background-color: $Hover;
        }
      }
    }
    :deep(.el-tree--highlight-current) {
      .el-tree-node.is-current > .el-tree-node__content {
        //
        // background-color: $HoverBgc;
        background-color: #ecf4ed;
        border-radius: 5px;

        margin: 5px 0;
        .el-tree-node__label,
        .el-tree-node__expand-icon {
          // color: $LvSe;
          color: #409353;
        }
        .is-leaf {
          color: transparent;
        }
      }
    }
  }
}
</style>
